<template>
    <div>
        <a-row :gutter="24">
            <a-col :span="6">
                <a-button block @click="importData">覆盖导入数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="importByKey('user', '客户')">覆盖导入客户数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="importByKey('order', '订单')">覆盖导入订单数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="importByKey('product' , '商品')">覆盖导入商品数据</a-button>
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top:24px">
            <a-col :span="6">
                <a-button block @click="mergeData">合并导入数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="mergeByKey('user', '客户')">合并导入客户数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="mergeByKey('order', '订单')">合并导入订单数据</a-button>
            </a-col>
            <a-col :span="6">
                <a-button block @click="mergeByKey('product' , '商品')">合并导入商品数据</a-button>
            </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top:24px">
            <a-col :span="6">
                <a-button block @click="clearData">清空数据</a-button>
            </a-col>
        </a-row>
    </div>
</template>
<script>
import db from '@/components/db';
export default {
    methods: {
        clearData() {
            this.$warning({
                title: '确定要重置所有数据库吗？',
                content: '当前所有数据库内容将被清空',
                onOk: () => {
                    this.$store.dispatch('clearData').then(() => {
                        this.$store.dispatch('initUsers');
                        this.$store.dispatch('initProducts');
                        this.$store.dispatch('initOrders');
                        this.$success({ title: '数据清空成功' });
                    });
                }
            });
        },
        importData() {
            this.$confirm({
                title: '确定要导入所有数据吗？',
                content: '这将覆盖当前的所有数据',
                onOk: () => {
                    db.importData().then(() => {
                        this.$store.dispatch('initUsers');
                        this.$store.dispatch('initProducts');
                        this.$store.dispatch('initOrders');
                        this.$success({ title: '数据导入成功' });
                    });
                }
            });
        },
        importByKey(key, name) {
            this.$confirm({
                title: '确定要导入' + name + '数据吗？',
                content: '这将覆盖当前的' + name + '数据',
                onOk: () => {
                    db.importByKey(key)
                        .then(() => {
                            switch (key) {
                                case 'user':
                                    this.$store
                                        .dispatch('initUsers')
                                        .then(() => {
                                            this.showImportSuccessDialog(name);
                                        });
                                    break;
                                case 'order':
                                    this.$store
                                        .dispatch('initOrders')
                                        .then(() => {
                                            this.showImportSuccessDialog(name);
                                        });
                                    break;
                                case 'product':
                                    this.$store
                                        .dispatch('initProducts')
                                        .then(() => {
                                            this.showImportSuccessDialog(name);
                                        });
                                    break;
                            }
                        })
                        .catch(reason => {
                            if (reason.message !== 'canceled') {
                                this.$error({ title: reason.message });
                            }
                        });
                }
            });
        },
        showImportSuccessDialog(name) {
            this.$success({
                title: name + '数据导入成功'
            });
        },
        mergeData() {
            db.mergeData().then(() => {
                this.$store.dispatch('initUsers');
                this.$store.dispatch('initProducts');
                this.$store.dispatch('initOrders');
                this.$success({ title: '数据导入成功' });
            });
        },
        mergeByKey(key, name) {
            db.mergeByKey(key).then(() => {
                switch (key) {
                    case 'user':
                        this.$store.dispatch('initUsers').then(() => {
                            this.showImportSuccessDialog(name);
                        });
                        break;
                    case 'order':
                        this.$store.dispatch('initOrders').then(() => {
                            this.showImportSuccessDialog(name);
                        });
                        break;
                    case 'product':
                        this.$store.dispatch('initProducts').then(() => {
                            this.showImportSuccessDialog(name);
                        });
                        break;
                }
            });
        }
    }
};
</script>
